<template>
  <div>
    <a-list :grid="{ gutter: 16, column: 3 }" :data-source="data" :pagination="{onChange: (current, size) => {this.num = current,this.getAll()}, showQuickJumper: true, pageSize: 12, total: totalList}">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-card hoverable style="width: 300px">
          <img
            v-if="item.state==='1'"
            slot="cover"
            alt="example"
            style="width:300px;height:200px"
            src="https://image.lcsum.top/resolved.png"
          />
          <img
            v-if="item.state==='0'"
            slot="cover"
            alt="example"
            style="width:300px;height:200px"
            src="https://image.lcsum.top/unsolved.png"
          />
          <template slot="actions" class="ant-card-actions">
            <a-icon key="edit" type="edit" @click="check(index)"/>
            <a-icon key="delete" type="delete" @click="del(index)"/>
          </template>
          <a-card-meta :headStyle="headCss" :title="item.name" :description="item.comment">
            <a-avatar
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-card-meta>
        </a-card>
      </a-list-item>
    </a-list>
    <a-modal
      title="查看详情"
      style="top: 20px;"
      :width="800"
      v-model="visible"
      @ok="handleOk()"
    >
      <a-form class="permission-form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称" hasFeedback>
          <a-input disabled v-model="name" v-decorator="['id']" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系方式" hasFeedback>
          <a-input disabled v-model="phone" v-decorator="['id']" />
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内容" hasFeedback>
          <a-textarea disabled :rows="5" v-model="text" id="describe" v-decorator="['describe']" />
        </a-form-item>
        <a-switch @change="onChange" style="float:right" checked-children="已解决" un-checked-children="未解决" v-model="checked" />
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { updateFeedBack, delFeedBack, getAllFeedBack } from '@/api/manage'
export default {
  data () {
    return {
      data: [],
      visible: false,
      totalList: 0,
      num: 1,
      name: '',
      phone: '',
      text: '',
      state: '',
      checked: [],
      changeState: false,
      id: '',
      changeIndex: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      headCss: { 'overflow': 'hidden', 'display': '-webkit-box', '-webkit-box-orient': 'vertical', 'text-overflow': 'ellipsis', '-webkit-line-clamp': 1, 'word-break': 'break-all' }
    }
  },
  methods: {
    del (index) {
      const Id = { id: this.data[index].id }
      delFeedBack(Id).then((res) => {
        // console.log('success')
      })
    },
    handleOk () {
      if (this.changeState !== (this.data[this.changeIndex].state === '1')) {
        if (!this.changeState) {
          this.state = '0'
          // console.log('0')
        } else {
          this.state = '1'
          // console.log('1')
        }
        const State = { state: this.state, id: this.id }
        updateFeedBack(State).then((res) => {
          // console.log(this.state)
          this.$set(this.data[this.changeIndex], 'state', this.state)
          // console.log('success')
        })
        .finally(() => {
          this.visible = false
        })
      }
    },
    onChange (state, event) {
      this.changeState = state
      // console.log(state)
    },
    check (index) {
      // console.log(index)
      this.text = this.data[index].comment
      this.name = this.data[index].name
      this.phone = this.data[index].phone
      this.checked = this.data[index].state === '1'
      // console.log(this.checked)
      this.id = this.data[index].id
      this.changeIndex = index
      this.visible = true
    },
    getAll () {
      const pageBase = { pageSize: 12, pageNum: this.num }
      getAllFeedBack(pageBase).then((res) => {
        this.data = res.datalist
        // console.log(this.data)
        this.totalList = Number(res.total)
      })
    }
  },
  created () {
    this.getAll()
  }
}
</script>

<style lang="less" scoped>
.flexPicture{
  display: flex;
  flex-direction: row;
   margin-top: -15%;
}
.pLine{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
/deep/.ant-card-meta-description {
  color: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
}
// // 编辑弹窗
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
